<template>
  <div
    class="video-item rel flex-c flex-v align-center"
    :class="{ active: active === index || selectAllFile ,editable:!editable}"
    @mouseenter="active = index"
    @mouseleave="handleMouseLeave(index)"
  >
    <div v-if="active === index&&editable" class="abs func-box flex-c align-center">
      <i
        class="el-icon-delete red pointer el-icon"
        @click.stop="handleDel(index)"
      />
      <el-popover
        placement="right"
        width="100"
        trigger="click"
        @hide="handleHide"
      >
        <div
          class=" pointer popover-name"
          @click="
            handleHide;
            $refs.updateRegistoryModal.open();
          "
        >
          编辑名称
        </div>
        <!-- <div class="mb pointer popover-name" @click="handleEdit">编辑视频</div> -->
        <!-- <div class="pointer popover-name" @click="handleHide">下载视频</div> -->
        <i
          slot="reference"
          class="el-icon-more blue pointer el-icon"
          style="position: relative; top: -3px"
          @click.stop="stare = true"
        />
      </el-popover>
    </div>
    <el-popover placement="bottom" width="150" trigger="hover">
      <div slot="reference">
        <div class="flex-c flex-v align-center">
          <img
            :src="item.productUrl"
            class="img"
            crossorigin="anonymous"
          >
          <div class="name w-100" :title="item.productName">
            {{ item.productName }}
          </div>
          <div class="time">{{ item.productDuration }}</div>
        </div>
      </div>
      <div class="info">
        <div
          class="popover-name sm"
          style="
            max-width: 130px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          "
        >
          名称:{{ item.productName }}
        </div>
        <div class="popover-name sm">
          大小:{{ bytesToSize(item.productSize) }}
        </div>
        <div class="popover-name sm">发布次数:{{ item.publishTimes || 0 }}</div>
        <div class="popover-name sm">修改日期:{{ item.createTime }}</div>
      </div>
    </el-popover>
    <!-- 播放视频 -->
    <el-dialog
      :visible.sync="previewModal"
      width="730px"
      :title="item.productName"
      :modal-append-to-body="false"
      :before-close="handleClose"
    >
      <MaoVideo ref="maoVideo" :url="item.productUrl" />
    </el-dialog>
    <EditVideoModal
      ref="EditVideoModal"
      :url="item.productUrl"
      :item="item"
      @get="getNewVideo"
    />
    <UpdateNameModal
      ref="updateRegistoryModal"
      :item="item"
      :type="type"
      :item-name="item.productName"
      @get="updateName"
      @getTime="getCutTime"
    />
  </div>
</template>
<script>
import EditVideoModal from '@/components/EditVideoModal/Index.vue'
import UpdateNameModal from './UpdateNameModal.vue'
import { bytesToSize } from '@/utils/upload'
import { updateName, cutVideo, delItem } from '@/api/product'
export default {
  components: { EditVideoModal, UpdateNameModal },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    },
    selectAllFile: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'video'
    }
  },
  data() {
    return {
      stare: false,
      active: -1,
      previewModal: false
      // url: 'https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mp4'
    }
  },
  computed: {
    typeText() {
      return '视频'
    }
  },
  created() {},
  methods: {
    async updateName(form) {
      const res = await updateName({
        id: form.id,
        productName: form.name
      })
      if (res.success) {
        this.$message.success('修改成功')
        this.handleHide()
        this.$emit('refresh')
      } else {
        this.$message.error(res.message)
      }
    },
    bytesToSize(bytes) {
      return bytesToSize(bytes)
    },
    handleEdit() {
      this.$refs.EditVideoModal.open()
      this.handleHide()
    },
    getNewVideo(cc) {
      console.log(cc)
    },
    handleOpen() {
      if (this.$refs.maoVideo) {
        this.$refs.maoVideo.open()
      }
    },
    handleClose(done) {
      if (this.$refs.maoVideo) {
        this.$refs.maoVideo.close()
      }
      if (done) {
        done()
      }
    },
    handleMouseLeave(index) {
      setTimeout(() => {
        if (!this.stare) {
          this.active = -1
        }
      }, 300)
    },
    handleHide() {
      this.stare = false
      this.active = -1
    },
    handleDel(item) {
      this.$confirm('确定要删除视频？', '删除素材')
        .then(async() => {
          const res = await delItem({ id: item.id.toString() })
          if (res.success) {
            this.$message.success('成功')
            this.$emit('refresh')
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((e) => {
          this.$message.warning('取消')
        })
    },
    async getCutTime(timeRange = []) {
      const res = await cutVideo({
        id: this.item.id.toString(),
        start: timeRange[0] || 0,
        end: timeRange[1] || 0
      })
      if (res.success) {
        this.$message.success('成功')
        this.handleHide()
        this.$emit('refresh')
      } else {
        this.$message.error(res.message)
      }
    },
    async delItem() {
      const res = await delItem({
        id: this.item.id.toString()
      })
      if (res.success) {
        this.$message.success('成功')
        this.handleHide()
        this.$emit('refresh')
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.mb {
  margin-bottom: 10px;
}
.video-item.editable{
  padding-top: 15px;
}
.video-item {
  border-radius: 15px;
  box-sizing: border-box;
  padding: 45px 15px 5px;
  span{
    display: block;
    width: 100%;
  }
  .popover-name {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }
  .popover-name.sm {
    font-size: 14px;
  }
  .func-box {
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
    padding: 0 12px;
    height: 30px;
    top: 5px;
    right: 5px;
    .el-icon {
      font-size: 18px;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
    .red {
      color: rgba(255, 0, 0, 1);
    }
    .blue {
      color: rgba(0, 119, 255, 0.76);
    }
  }

  .img {
    width: 90px;
    height: 90px;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
  }
  .name {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin-top: 10px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .time {
    font-size: 14px;
    font-weight: 400;
    color: rgba(166, 166, 166, 1);
    margin-top: 10px;
  }
}
.video-item.active {
  background: rgba(0, 119, 255, 0.2);
}
</style>
